<template>
    <div>
        <div class="topitem">
            <h3>{{date}}   {{title}}</h3>
            <el-select  v-model="selectarea" placeholder="请选择统计范围">
                <el-option v-for="(area, index) in areas" :key="index" :label="area.label" :value="area.value"></el-option>
            </el-select>
        </div>
        
        <div id="topchart"></div>
        <div id="botchart"></div>
        <el-button @click="goback" class="goback">返回</el-button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            date: '',
            title: '',
            areas: [],
            selectarea: ''
        }
    },
    mounted() {
        let activity = sessionStorage.getItem('activity')
        if(activity) {
            let data = JSON.parse(activity)
            this.date = data.date
            this.title = data.title
        }
        this.getDayList()
        this.getActivityCount()
        this.getCommentCount()

    },
    created() {
        
    },
    methods: {
        getDayList() {
          // 活动日程下拉框
          let param = {
            eventId: this.$route.query.id
          }
          this.$api.apiGetDaySelect(param, res => {
            this.areas = res.data
          })
        },
        goback() {
            sessionStorage.removeItem('activity')
            this.$router.go(-1)
        },
        getActivityCount() {
            // 活动参与人数
            let param = {
               // eventId: this.$route.query.id,
                scheduleId: this.selectarea
            }
            this.$api.apiPartyActivityCount(param, res => {
                if(res.data != null) {
                    let {provinceMap, provinceList, countryMap, countryList} = res.data
                    let countrydatapie = [
                        {name: '参加活动的男性', value: countryMap.manSum},
                        {name: '参加活动的女性', value: countryMap.womanSum},
                    ]
                    let provincedatapie = [
                        {name: '参加活动的男性', value: provinceMap.manSum},
                        {name: '参加活动的女性', value: provinceMap.womanSum},
                    ]
                    let mychart = this.$echarts.init(document.getElementById('topchart'))
                    this.creatTop(mychart, countrydatapie, countryList, provinceList, provincedatapie)
                } else {
                    this.$message({
                        type: 'warning',
                        message: '暂无数据'
                    })
                }
            })
        },
        getCommentCount() {
            // 活动发表感悟数
            let param = {
                eventId: this.$route.query.id
            }
            this.$api.apiPubCommentCount(param ,res => {
                if(res.data != null) {
                    let commentPie = [
                        {name: '女性发表次数', value: res.data.womanSum},
                        {name: '男性发表次数', value: res.data.manSum},
                    ]
                    this.getDayCommentList(commentPie)
                }
                
            })
        },
        getDayCommentList(commentPie) {
            let param = {
                eventId: this.$route.query.id
            }
            this.$api.apiDayPubCommentCount(param, res => {
                let data = res.data
                if(data != null) {
                    let mychart = this.$echarts.init(document.getElementById('botchart'))
                    this.creatBottom(mychart, commentPie, data)
                    
                }
            })
        },
        creatTop(mychart, countrydatapie, countryList, provinceList, provincedatapie) {
                let xAxisDataC = [];
                let yAxisDataC = []

                if(countryList.length > 0) {
                    countryList.forEach(item => {
                        xAxisDataC.push(item.province)
                        yAxisDataC.push(item.total)
                    })
                }
                let xAxisDataP = [];
                let yAxisDataP = []
                
                if(provinceList.length > 0) {
                    provinceList.forEach(item => {
                        xAxisDataP.push(item.city)
                        yAxisDataP.push(item.total)
                    })
                }
                var rich = {
                    white: {
                        fontSize: 16,
                        lineHeight: 30
                    }
                };
                var option = {
                    backgroundColor: '#fff',

                    title: [{
                            text: "全国范围参加活动人数（仅统计报名者）",
                            top: "top",
                            left: "left",
                            textStyle: {
                                fontSize: "16"
                            }
                        },
                        {
                            text: "全国范围参加活动人数（仅统计报名者）",
                            x: "50%",
                            top: "top",
                            textStyle: {
                                fontSize: "16"
                            }
                        },
                        {
                            text: "河南省内参加活动人数（仅统计报名者）",
                            left: 'left',
                            y: "50%",
                            textStyle: {
                                fontSize: "16"
                            }
                        },
                        {
                            text: "河南省内参加活动人数（仅统计报名者）",
                            x: "50%",
                            y: "50%",
                            textStyle: {
                                fontSize: "16"
                            }
                        }
                    ],
                    grid: [{
                        x: "60%",
                        y: "7%",
                        width: "35%",
                        height: "40%"
                    },
                    {
                        x: "60%",
                        y: "56%",
                        width: "35%",
                        height: "40%"
                    }],
                    tooltip: {
                        formatter: "{b} {c}人"
                    },
                    xAxis: [{
                        gridIndex: 0,
                        data: xAxisDataC,
                        axisLine: {
                            show: true
                        }
                    },
                    {
                        gridIndex: 1,
                        data: xAxisDataP,
                        axisLine: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        gridIndex: 0,
                        interval: 0,
                        axisLine: {
                            show: true
                        }
                    },
                    {
                        gridIndex: 1,
                        interval: 0,
                        axisLine: {
                            show: true
                        }
                    }],
                    
                    series: [{
                            name: "全国范围参加活动人数（仅统计报名者）",
                            type: "pie",
                            radius: "30%",
                            center: ["25%", "25%"],
                            color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
                            data: countrydatapie,
                            labelLine: {
                                length: 15,
                                length2: 15
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: "{b}:{white|{c}} \n ({d}%)",
                                        rich: rich
                                    }
                                }
                            }
                        },
                        {
                            name: "河南省内参加活动人数（仅统计报名者）",
                            type: "pie",
                            radius: "30%",
                            center: ["25%", "80%"],
                            color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
                            labelLine: {
                                length: 15,
                                length2: 15
                            },
                            data: provincedatapie,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: "{b}:{white|{c}} \n ({d}%)",
                                        rich: rich
                                    }
                                }
                            }
                        },
                        {
                            name: "全国范围参加活动人数（仅统计报名者）",
                            type: "bar",
                            barWidth: "25%",
                            itemStyle: {
                                    normal: {
                                        color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#4889fb" // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#15b3ff" // 100% 处的颜色
                                        }], false)
                                    }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    fontSize: 16
                                }
                            },
                            data: yAxisDataC
                        },
                        {
                            name: "河南省内参加活动人数（仅统计报名者）",
                            type: "bar",
                            barWidth: "25%",
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            itemStyle: {
                                    normal: {
                                        color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#4889fb" // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#15b3ff" // 100% 处的颜色
                                        }], false)
                                    }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    fontSize: 16
                                }
                            },
                            data: yAxisDataP
                        }
                    ]
                };
                mychart.setOption(option)
        },
        creatBottom(mychart, piedata, listdata) {
            let xAxisData = [];
            let yAxisData = []

            if(listdata.length > 0) {
                listdata.forEach(item => {
                    xAxisData.push(item.operation)
                    yAxisData.push(item.total)
                })
            }
            var rich = {
                white: {
                    fontSize: 16,
                    lineHeight: 30
                }
            };
            var option = {
                backgroundColor: '#fff',

                title: [{
                        text: "活动发表感悟数（仅统计报名者）",
                        top: "top",
                        left: "left",
                        textStyle: {
                            fontSize: "16"
                        }
                    },
                    {
                        text: "日程事件发表感悟情况",
                        x: "50%",
                        top: "top",
                        textStyle: {
                            fontSize: "16"
                        }
                    },
                    
                ],
                grid: [{
                    x: "60%",
                    y: "7%",
                    width: "35%",
                    height: "84%"
                }],
                tooltip: {
                    formatter: "{b} {c}人"
                },
                xAxis: [{
                    gridIndex: 0,
                    data: xAxisData,
                    axisLine: {
                        show: true
                    }
                }],
                yAxis: [{
                    gridIndex: 0,
                    interval: 0,
                    axisLine: {
                        show: true
                    }
                }],
                series: [{
                        name: "活动发表感悟数（仅统计报名者）",
                        type: "pie",
                        radius: "60%",
                        center: ["25%", "50%"],
                        color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
                        data: piedata,
                        labelLine: {
                            length: 5,
                            length2: 5
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: "{b}:{white|{c}} \n ({d}%)",
                                    rich: rich
                                }
                            }
                        }
                    },
                    {
                        name: "日程事件发表感悟情况",
                        type: "bar",
                        barWidth: "25%",
                        itemStyle: {
                                normal: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: "#4889fb" // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "#15b3ff" // 100% 处的颜色
                                    }], false)
                                }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                fontSize: 16
                            }
                        },
                        data: yAxisData
                    }
                ]
            };
            mychart.setOption(option)
        }
    }
}
</script>
<style lang="scss">
$width: 84%;
.topitem {
    display: flex;
    width: $width;
    margin: 20px auto 30px;
    line-height: 40px;
    h3{ 
        margin: 0;
        margin-right: 4%
    }
}
#topchart, #botchart {
    width: 84%;
    margin: 0 auto;
    height: 740px;
}
#botchart {
    height: 380px;
}
</style>
